<script setup lang="ts">
	import type { BannerItem } from "@/types/home";
	import { ref } from "vue"
	const activeIndex = ref(0)
	defineProps<{
		list : BannerItem[]
	}>()
	const changeswier=(e)=>{
		console.log(e)
		activeIndex.value=e.detail.current
	}
</script>
<template>
	<view class="carasel">
		<swiper @change="changeswier" :circular="true" :autoplay="false" :interval="3000">
			<swiper-item v-for="item in list" :key="item.id">
				<navigator url="/pages/index/index" hover-class="none" class="navigator">
					<image mode="aspectFill" class="image" :src="item.imgUrl"></image>
				</navigator>
			</swiper-item>

		</swiper>
		<view class="indicator">
			<text v-for="(item,index) in list" :key="index" class="dot" :class="{active:index == activeIndex}"></text>

		</view>
	</view>
</template>



<style>
	:host {
		display: block;
		height: 280rpx;
	}

	.carasel {
		height: 100%;
		position: relative;
		overflow: hidden;
		transform: translateY(0);
		background: #efefef;

	}

	.indicator {
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 16rpx;
		display: flex;
		justify-content: center;
	}

	.dot {
		width: 30rpx;
		height: 6rpx;
		margin: 0 8rpx;
		border-radius: 6rpx;
		background-color: rgba(255, 255, 255, 0.4);
	}

	.active {
		background-color: #fff;
	}

	.navigator {

		width: 100%;
		height: 100%;

	}

	.image {
		width: 100%;
		height: 100%;
	}
</style>